<page-header>
  <!-- <p style="margin-bottom: 0px">&nbsp;</p> -->
  <!-- <nz-card> -->
    <div nz-row [nzGutter]="24">
      <div nz-col nzL g="24" nzXl="9">
        <div class="gutter-box">
          <div class="more">查看详情</div>
          <div class="con">
            <div class="l"><img src="https://www.zhaodui.com.cn/pic/good.png"></div>
            <div class="r">
              <div class="title">广州买卖车销售公司</div>
              <div class="info">
                <span>有效账户</span>
                <div class="text">
                  <p>合作时间：2019-03-21</p>
                  <p>负责人：张三</p>
                  <p>联系电话：130000000</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div nz-col nzLg="24" nzXl="15">
        <div class="gutter-box">
          <div class="more">查看详情</div>
          <div class="con">
            <div class="l"><img src="https://www.zhaodui.com.cn/pic/bad.png"><span>数据统计</span></div>
            <div class="r">
              <div class="statistics"><p>不良率</p><span>1.7%</span></div>
              <div class="statistics "><p class="bgred">已赔付</p><span>¥123456</span></div>
              <div class="statistics"><p class="bgyellow">贷款余额</p><span>¥123456</span></div>
              <div class="statistics"><p class="bggreen">待赔付</p><span>¥123456</span></div>
            </div>
          </div>
          <div class="b"><label nz-checkbox [(ngModel)]="checked" (ngModelChange)="checkboxchange($event)">开启微信提醒</label></div>
        </div>
      </div>
    </div>
  <!-- </nz-card> -->
  <!-- <nz-card> -->
    <div class="bar">
      <nz-tabset (nzSelectChange)="change($event)">
        <nz-tab nzTitle="全部账户"></nz-tab>
        <nz-tab nzTitle="M1账户"></nz-tab>
        <nz-tab nzTitle="M2账户"></nz-tab>
        <nz-tab nzTitle="M3账户"></nz-tab>
        <nz-tab nzTitle="M3+账户"></nz-tab>
        <nz-tab nzTitle="历史进件数"></nz-tab>
        <nz-tab nzTitle="历史放款量"></nz-tab>
        <nz-tab nzTitle="历史通过率"></nz-tab>
        <nz-tab nzTitle="历史转化率"></nz-tab>
      </nz-tabset>
    </div>
    <div nz-row [nzGutter]="24" *ngIf="changeIndex==0">
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>M1账户数</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>M2账户数</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>M3账户数</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>M3+账户数</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>待赔付金额</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="12" nzXl="8">
        <div class="mbox">
          <div class="title">
            <h3>已赔付金额</h3>
            <nz-tooltip [nzTitle]="'指标说明'">
              <i nz-tooltip nz-icon type="info-circle"></i>
            </nz-tooltip>
          </div>
          <div nz-row [nzGutter]="24">
            <div nz-col nzLg="8">
              <p>本月新增</p>
              <span>12个</span>
            </div>
            <div nz-col nzLg="8">
              <p>同比值</p>
              <span>30%</span>
            </div>
            <div nz-col nzLg="8">
              <p>账户金额</p>
              <span>¥123456</span>
            </div>
          </div>
          <div class="bottom">
            <button nz-button nzType="default">下载</button>
            <button nz-button nzType="default">可视化图表</button>
            <button nz-button nzType="primary">查看详情</button>
          </div>
        </div>
      </div>
    </div>

    <div class="gutter-example" *ngIf="changeIndex!=0">
      <simple-table #st
        [columns]="columns"
        [data]="listOfData"
        [ps]="ps"
        [extraParams]="q"
        [resReName]="{ total: 'total', list: 'data'}"
        [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
        toTopInChange
        [showTotal]="true"
        [showPagination]="true"
        [showSizeChanger]="true"
        [scroll]="{  x: '1300px' }"
        >
    </simple-table>
      
    </div>

  <!-- </nz-card> -->
</page-header>



